<template>
	<view class="page">
		<view class="page_header">
			<navigation defaultButton="back">服务补助</navigation>
		</view>
		<view class="page_main">
			<view class="card">
				<view class="card_info">
					<view class="card_info-top">
						服务补助总金额(元)
					</view>
					<view class="card_info-content">
						{{detail.sumMoney |toFixed(2)}}
					</view>
					<view class="card_info-footer">
						<view class="item">
							<text class="label">待补助金额</text>
							<text class="text">{{detail.waitMoney |toFixed(2)}}</text>
						</view>
						<view class="item">
							<text class="label">已补助金额</text>	
							<text class="text">{{detail.money |toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item__name">
					<view class="label">补助明细</view>
				</view>
				<view class="form-item__value">
					<!-- <view class="form-item__value-input">
						详情 <text class="nursing-icon iconyoujiantou"></text>
					</view> -->
				</view>
			</view>
			<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom">
				<view class="list">
					<view class="list_item" v-for="(item,index) in dataList" :key="index">
						<view class="item_top">
							<view class="name">{{item.name}}</view>
							<view class="money">补助金额：￥{{item.subsidy | toFixed(2)}}</view>
						</view>
						<view class="item_bottom">
							<view class="item">
								<view class="label">订单编号</view>
								<view class="text">{{item.subsidyOrderCode}}</view>
							</view>
							<view class="item">
								<view class="label">创建时间</view>
								<view class="text">{{item.subsidyGmtCreate | toDate('yyyy-MM-dd hh:mm') || '--'}}</view>
							</view>
							<view class="item">
								<view class="label">成交时间</view>
								<view class="text">{{item.subsidyGmtModified | toDate('yyyy-MM-dd hh:mm') || '--'}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data">
					<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as orgApi from '@/api/orgApi/org.js'
	export default {
		data() {
			return {
				detail: {
					total: 7540.1,
					alreadySubsidy: 2145.21,
					awaitSubsidy: 2542.51,
				},
				dataList: [],
				// more
				moreStatus: 'more',
				moreContentText: {
					// 加载各状态文字说明。
					contentdown: '加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了'
				},
				searchModel: {
					id: '',
					current: 1,
					size: 10
				}
			};
		},
		onShow(){
			this.getList();
		},
		methods: {
			getList() {
				orgApi
					.querySubsidy()
					.then(res => {
						if (res.code === 0) {
							if (this.searchModel.current == 1) {
								this.dataList = [];
							}
							if (res.data.subsidies && res.data.subsidies.length == 10) {
								this.moreStatus = 'more';
								this.searchModel.current += 1;
								this.dataList = [...this.dataList, ...res.data.subsidies];
							} else if (res.data.subsidies && res.data.subsidies.length < 10) {
								this.moreStatus = 'noMore';
								this.searchModel.current += 1;
								this.dataList = [...this.dataList, ...res.data.subsidies];
							} else {
								this.moreStatus = 'noMore';
							}
							this.detail = res.data;
						}
					})
					.catch(e => {
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			},
			// 滑动到底部。分页处理
			scrollBottom() {
				this.getList();
			}
		}
	}
</script>

<style lang="stylus">
	.page {
		background-color rgba(243, 243, 243, 1);
	}

	.page_main {
		position absolute;
		top calc(120rpx + var(--status-bar-height));
		right 0rpx;
		bottom 0rpx;
		left 0rpx;
	}

	.card {
		width 100%;
		height 440rpx;
		padding 0rpx 30rpx;
		box-sizing border-box;

		.card_info {
			width 100%;
			height 100%;
			padding 62rpx 100rpx 80rpx 100rpx;
			box-sizing border-box;
			background: #FFFFFF;
			border-radius: 10rpx;
			position relative;

			.card_info-top {
				font-size: 24rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #666666;
				text-align center;
			}

			.card_info-content {
				margin-top 30rpx;
				font-size: 56rpx;
				font-family: DIN;
				font-weight: 500;
				color: #222222;
				text-align center;
			}

			.card_info-footer {
				display flex;
				align-items center;
				justify-content space-between;
				position absolute;
				bottom 80rpx;
				left 100rpx;
				right 100rpx;

				.item {
					display flex;
					flex-direction column;

					.label {
						font-size: 24rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #999999;
					}

					.text {
						margin-top 12rpx;
						font-size: 28rpx;
						font-family: DIN;
						font-weight: 500;
						color: #222222;
						text-align center;
					}
				}
			}
		}
	}

	.form-item {
		padding 0rpx 30rpx;
		box-sizing border-box;

		.form-item__name {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.form-item__value-input {
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #999999;

			.nursing-icon {
				font-size 20rpx;
			}
		}

	}

	.page_scroll {
		position absolute;
		top 540rpx;
		right 0rpx;
		bottom 0rpx;
		left 0rpx;

		.list {
			width 100%;
			padding 0rpx 30rpx;
			box-sizing border-box;

			.list_item {
				margin-bottom 20rpx;
				padding 20rpx 20rpx 8rpx 20rpx;
				box-sizing border-box;
				background-color #FFFFFF;
				border-radius: 12rpx;

				.item_top {
					display flex;
					justify-content space-between;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.money {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF7D21;
					}
				}

				.item_bottom {
					margin-top 25rpx;

					.item {
						margin-bottom 20rpx;
						display flex;
						align-items center;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>
